<template>
  <div id='nav'>
    <!--面包屑导航-->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item>首页</el-breadcrumb-item>
      <el-breadcrumb-item>菌子导航</el-breadcrumb-item>
      <el-breadcrumb-item>常用网址</el-breadcrumb-item>
    </el-breadcrumb>
    <el-card>
      <div>
        <el-tabs :tab-position="tabPosition" style="height: 500px;">
          <el-tab-pane :label="siteDataBody.siteType" v-for="siteDataBody in collectedSiteDataBodyList" :key="siteDataBody.siteType">
            <li v-for="siteData in siteDataBody.dataList" :key="siteData.name" style="list-style-type:none;display:inline-block;">
              <CollectedSiteDataComponent :collectedSiteData="siteData"></CollectedSiteDataComponent>
            </li>
          </el-tab-pane>
        </el-tabs>
      </div>
    </el-card>
  </div>
</template>

<script>
import axios from 'axios'
import { CollectedSiteEntity } from '@/assets/js/panel'
import CollectedSiteDataComponent from '@/components/CollectedSiteDataComponent'

export default {
  components: { CollectedSiteDataComponent },
  data () {
    return {
      collectedSiteDataBodyList: [],
      // 数据结构如下：
      // collectedSiteDataBodyList: [{
      //   dataList: [{
      //     createdTime: '',
      //     ico: '',
      //     name: '',
      //     remark: '',
      //     siteType: '',
      //     updateTime: '',
      //     url: ''
      //   }],
      //   siteType: ''
      // }]
      tabPosition: 'left'
    }
  },
  created () {
    this.collectedSiteDataBodyList = []
    this.listCollectedSites()
  },
  methods: {
    // 列出网站
    listCollectedSites (currentPage = 1, pageSize = 100) {
      const _this = this
      const jsonParam = {
        currentPage: currentPage,
        pageSize: pageSize
      }
      axios.post('http://localhost:18080/junzi/sites/list', jsonParam)
        .then(function (resp) {
          if (resp.status === 200) {
            const collectedSiteDataBodyList = resp.data.data.collectedSiteDataBodyList
            collectedSiteDataBodyList.forEach(dataBody => {
              const resultData = {
                siteType: dataBody.siteType,
                dataList: []
              }
              dataBody.dataList.forEach(siteData => {
                const siteEntity = new CollectedSiteEntity(siteData.name, siteData.remark, siteData.siteType, siteData.updateTime, siteData.url, siteData.ico, siteData.createdTime)
                resultData.dataList.push(siteEntity)
              })
              _this.collectedSiteDataBodyList.push(resultData)
            })
          } else {
            _this.message('加载网站数据失败')
          }
        })
    },
    // 新闻列表
    listNews () {
    },
    // 今日天气
    listWeather () {
    }
  }
}
</script>
<style scoped>
</style>
